<!--
 * @Description  : 设置密码
 * @Author       : MengFan Shan
 * @Date         : 2023-02-23
 * @LastEditors  : YiDing Xue
 * @LastEditTime : 2023-03-10
-->
<template>
  <AppPage :right-icon="{ icon: '', size: 0, path: '' }" :left-icon="{ icon: 'pajamas:chevron-lg-left', size: 24, path: 'setting' }">
    <template #center> <span>设置密码</span></template>

    <nut-form>
      <nut-form-item label="旧密码" label-align="center" :rules="[{ required: true, message: '请填写姓名' }]">
        <nut-input v-model="state.old" placeholder="请输入旧密码" type="password" />
      </nut-form-item>
      <nut-form-item label="新密码" label-align="center" required>
        <nut-input v-model="state.new" placeholder="请输入新密码" type="password" />
      </nut-form-item>
      <nut-form-item label="确认密码" label-align="center" required>
        <nut-input v-model="state.confirm" placeholder="请输入正确密码" type="password" />
      </nut-form-item>
    </nut-form>

    <nut-button class="button-popup" color="#fcd006">提交</nut-button>
  </AppPage>
</template>

<script setup>
const state = reactive({
  old: '',
  new: '',
  confirm: ''
})
</script>
<style scoped>
.button-popup {
  width: 310px;
  height: 40px;
  font-size: 16px;
  margin: 350px 20px;
  border-radius: 35px;
  border: none;
}
.return {
  margin-left: -110px;
  font-size: 17px;
}
.form {
  display: flex;
  justify-content: space-between;
}
</style>
